<!--
 * @FileDescription: 客制化品牌组件
 * @Author: 小威吃饱了
 * @Date: 2022/6/4
 * @LastEditors: 小威吃饱了
 * @LastEditTime: 2022/6/4
 -->
<template>
  <div class="abrands">
    <a
      href="https://www.zfrontier.com/app/brand/a7jY6jgaV5DG"
      class="logo-wrap"
    >
      <img src="@/assets/logo/Angry Miao.jpg" class="cover" />
      <div id="one" class="ellipsis">"怒喵 Angry Miao"</div>
    </a>
    <a
      href="https://www.zfrontier.com/app/brand/E7mKZRJYrVyB"
      class="logo-wrap"
    >
      <img src="@/assets/logo/HyperX.jpg" class="cover" />
      <div class="ellipsis">"HyperX"</div>
    </a>
    <a
      href="https://www.zfrontier.com/app/brand/J75rkRde3XLW"
      class="logo-wrap"
    >
      <img src="@/assets/logo/JWK.jpg" class="cover" />
      <div class="ellipsis">"精微科"</div>
    </a>
    <a
      href="https://www.zfrontier.com/app/brand/J75rkRde3XLW"
      class="logo-wrap"
    >
      <img src="@/assets/logo/Durgod.jpg" class="cover" />
      <div class="ellipsis">"杜伽 DURGOD"</div>
    </a>
    <a
      href="https://www.zfrontier.com/app/brand/J75rkRde3XLW"
      class="logo-wrap"
    >
      <img src="@/assets/logo/键设局.jpg" class="cover" />
      <div class="ellipsis">"键设局"</div>
    </a>
    <a
      href="https://www.zfrontier.com/app/brand/J75rkRde3XLW"
      class="logo-wrap"
    >
      <img src="@/assets/logo/JTK.jpg" class="cover" />
      <div class="ellipsis">"JTK"</div>
    </a>
    <a
      href="https://www.zfrontier.com/app/brand/J75rkRde3XLW"
      class="logo-wrap"
    >
      <img src="@/assets/logo/Gateron.jpg" class="cover" />
      <div class="ellipsis">"佳达隆"</div>
    </a>
    <a
      href="https://www.zfrontier.com/app/brand/J75rkRde3XLW"
      class="logo-wrap"
    >
      <img src="@/assets/logo/Loffee.jpg" class="cover" />
      <div class="ellipsis">"洛斐"</div>
    </a>
    <a
      href="https://www.zfrontier.com/app/brand/J75rkRde3XLW"
      class="logo-wrap"
    >
      <img src="@/assets/logo/KBDfans.jpg" class="cover" />
      <div class="ellipsis">"KBDfans"</div>
    </a>
    <a
      href="https://www.zfrontier.com/app/brand/J75rkRde3XLW"
      class="logo-wrap"
    >
      <img src="@/assets/logo/WASD.jpg" class="cover" />
      <div class="ellipsis">"WASD keyboards"</div>
    </a>
    <a
      href="https://www.zfrontier.com/app/brand/J75rkRde3XLW"
      class="logo-wrap"
    >
      <img src="@/assets/logo/aboStudio.jpg" class="cover" />
      <div class="ellipsis">"aboStudio"</div>
    </a>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  name: 'Brands'
}
</script>

<style>
.abrands {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  height: 500px;
}
.logo-wrap {
  width: 80px;
  height: 100px;
  box-shadow: 0 1px 4px 0rgba (0, 0, 0, 0.18);
  margin-bottom: 38px;
  text-align: center;
  color: #525e80;
}
.cover {
  width: 80px;
  object-position: center;
  object-fit: cover;
  border: 2px solid #525e80;
  border-radius: 10%;
}
a {
  text-decoration:none;
}
.ellipsis {
  width: 80px;
  height: auto;
  text-align: center;
  font-size: 10px;
}
</style>

